
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items:center;
            justify-content: center;
        }
        #count-outer{
            display: flex;
            width: 70%;
            height: 200px;
            flex-direction: row;
            justify-content:center;
            align-content: center;
        }

        .half{
            width:40%;
            height:80%;
            display: flex;
            flex-direction: column;
            justify-content:center;
            align-content: center;
        }
        .top{
            height: 50%;
        }
        .bottom{
            height: 50%;
        }
    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1600px;height:600px;"></div>
<script type="text/javascript">
    function getX(min,max){
        let data = []
        for(i = min;i <= max;i++){
            data.push(i)
        }
        return data
    }
    function getY(map) {
        let data = []
        for( i in map){
            data[i] = map[i]
        }

        for(i = 0;i < data.length;i++){
            if(data[i] == undefined){
                data[i] = 0
            }
        }
        console.log(data)
        return data
    }
    var xData
    var yData
    var max,min
    var miu,sigma
    let that = this
    $.post("http://127.0.0.1:8000/getMaxAndMin",function(data){
        console.log(data)
        max = data.max
        min = data.min
        xData = getX(min,max)
    })

    $.post("http://127.0.0.1:8000",function(data){
        console.log(data)
        miu = data.miu
        sigma = data.sigma
        yData = getY(data.data)
    })


    option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData
        },
        yAxis: {
            boundaryGap: [0, '50%'],
            type: 'value'
        },
        series: [
            {
                name:'数目',
                type:'line',
                // smooth:true,
                symbol: 'none',
                stack: 'a',
                areaStyle: {
                    normal: {}
                },
                data: yData
            }
        ]
    };

    function updateData(){
        $.post("http://127.0.0.1:8000",function(data){
            console.log(data)
            miu = data.miu
            sigma = data.sigma
            yData = getY(data.data)
        })
    }

    setInterval(function () {
        updateData();
        myChart.setOption({
            xAxis: {
                data: xData
            },
            series: [{
                name:'数目',
                data: yData
            }]
        });
        $("#max").text(max)
        $("#min").text(min)
        $("#miu").text(miu)
        $("#sigma").text(sigma)
    }, 1000);

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option)
</script>

<div id="count-outer">
    <div class="half">
        <div class="top">
            最大值：<b id="max"></b>
        </div>
        <div class="bottom">
            最小值：<b id="min"></b>
        </div>
    </div>
    <div class="half">
        <div class="top">
            方差：<b id="sigma"></b>
        </div>
        <div class="bottom">
            均值：<b id="miu"></b>
        </div>
    </div>
</div>
</body>